<template>
    <div class="logo-block">
        <div class="logo-png">
            <img
                alt="logo"
                src="./../../assets/img/logo.png"
            >
        </div>
        <div
            v-show="!collapse"
            class="logo-text"
        >
            vains
        </div>
    </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
    name: "Logo",
    computed: {
        ...mapGetters({
            collapse: 'getCollapse',
        })
    }
}
</script>

<style scoped>
    @import "../../fonts/googleapis.css";
    .logo-png img {
        max-width: 30px;
        vertical-align: middle;
    }
    .logo-png {
        width: 50px;
        vertical-align: middle;
        margin-left: 10px;
    }
    .logo-text {
        width: 50px;
        color: white;
        font-family: Merienda,serif;
        font-size: 25px;
    }
    .logo-block {
        width: 100%;
        line-height: 56px;
        text-align: center;
        display: inline-flex !important;
    }
</style>
